<template>
    <div class="bg-gray-50 min-h-screen flex items-center justify-center font-sans">
        <div class="w-full max-w-md">
            <!-- Logo 区域 -->
            <div class="text-center mb-8">
                <div class="w-16 h-16 bg-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-robot text-white text-2xl"></i>
                </div>
                <h1 class="text-3xl font-bold text-gray-800 mb-2">AI Chat</h1>
                <p class="text-gray-600">智能对话助手</p>
            </div>

            <!-- 重置密码表单 -->
            <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
                <h2 class="text-2xl font-semibold text-gray-800 mb-6 text-center">设置新密码</h2>

                <!-- 错误提示 -->
                <div v-if="errorMessage" class="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    {{ errorMessage }}
                </div>

                <!-- 成功提示 -->
                <div v-if="successMessage"
                    class="mb-4 p-3 bg-green-100 border border-green-400 text-green-700 rounded-lg">
                    <i class="fas fa-check-circle mr-2"></i>
                    {{ successMessage }}
                </div>

                <form v-if="!isSuccess" @submit.prevent="handleSubmit" class="space-y-6">
                    <div class="text-center mb-6">
                        <p class="text-gray-600">请输入您的新密码</p>
                    </div>

                    <!-- 新密码输入 -->
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-2">新密码</label>
                        <div class="relative">
                            <input :type="showPassword ? 'text' : 'password'" id="password" name="password" required
                                v-model="password" :disabled="isLoading"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-all duration-200 disabled:bg-gray-100 disabled:cursor-not-allowed"
                                placeholder="请输入新密码（至少6位）">
                            <button type="button" @click="togglePasswordVisibility"
                                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors">
                                <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                            </button>
                        </div>
                        <p v-if="passwordError" class="text-red-500 text-sm mt-1">{{ passwordError }}</p>
                    </div>

                    <!-- 确认密码输入 -->
                    <div>
                        <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-2">确认新密码</label>
                        <div class="relative">
                            <input :type="showConfirmPassword ? 'text' : 'password'" id="confirmPassword"
                                name="confirmPassword" required v-model="confirmPassword" :disabled="isLoading"
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-all duration-200 disabled:bg-gray-100 disabled:cursor-not-allowed"
                                placeholder="请再次输入新密码">
                            <button type="button" @click="toggleConfirmPasswordVisibility"
                                class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors">
                                <i :class="showConfirmPassword ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
                            </button>
                        </div>
                        <p v-if="confirmPasswordError" class="text-red-500 text-sm mt-1">{{ confirmPasswordError }}</p>
                    </div>

                    <!-- 提交按钮 -->
                    <button type="submit" :disabled="isLoading || !isFormValid"
                        class="w-full bg-emerald-600 hover:bg-emerald-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white font-semibold py-3 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 disabled:transform-none">
                        <i v-if="isLoading" class="fas fa-spinner fa-spin mr-2"></i>
                        <i v-else class="fas fa-key mr-2"></i>
                        {{ isLoading ? '重置中...' : '重置密码' }}
                    </button>

                    <!-- 返回登录 -->
                    <div class="text-center">
                        <router-link to="/login"
                            class="text-sm text-emerald-600 hover:text-emerald-700 transition-colors">
                            <i class="fas fa-arrow-left mr-1"></i>
                            返回登录
                        </router-link>
                    </div>
                </form>

                <!-- 成功状态 -->
                <div v-else class="text-center space-y-6">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto">
                        <i class="fas fa-check text-green-600 text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">密码重置成功</h3>
                        <p class="text-gray-600 mb-4">
                            您的密码已成功重置，现在可以使用新密码登录了。
                        </p>
                    </div>
                    <router-link to="/login"
                        class="inline-block px-6 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors">
                        前往登录
                    </router-link>
                </div>
            </div>

            <!-- 底部信息 -->
            <div class="text-center mt-8 text-sm text-gray-500">
                <p>© 2024 AI Chat. 保留所有权利.</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { resetPasswordAPI } from '@/http/chatAPI'

const route = useRoute()

const isLoading = ref(false)
const isSuccess = ref(false)
const errorMessage = ref('')
const successMessage = ref('')
const password = ref('')
const confirmPassword = ref('')
const showPassword = ref(false)
const showConfirmPassword = ref(false)
const passwordError = ref('')
const confirmPasswordError = ref('')
const resetToken = ref('')

const isFormValid = computed(() => {
    return password.value &&
        confirmPassword.value &&
        !passwordError.value &&
        !confirmPasswordError.value
})

const togglePasswordVisibility = () => {
    showPassword.value = !showPassword.value
}

const toggleConfirmPasswordVisibility = () => {
    showConfirmPassword.value = !showConfirmPassword.value
}

const validatePassword = () => {
    if (!password.value) {
        passwordError.value = '请输入密码'
    } else if (password.value.length < 6) {
        passwordError.value = '密码长度至少6位'
    } else if (password.value.length > 50) {
        passwordError.value = '密码长度不能超过50位'
    } else {
        passwordError.value = ''
    }

    // 重新验证确认密码
    if (confirmPassword.value) {
        validateConfirmPassword()
    }
}

const validateConfirmPassword = () => {
    if (!confirmPassword.value) {
        confirmPasswordError.value = '请确认密码'
    } else if (password.value !== confirmPassword.value) {
        confirmPasswordError.value = '两次输入的密码不一致'
    } else {
        confirmPasswordError.value = ''
    }
}

const clearMessages = () => {
    errorMessage.value = ''
    successMessage.value = ''
}

const handleSubmit = async () => {
    clearMessages()

    validatePassword()
    validateConfirmPassword()

    if (!isFormValid.value) {
        return
    }

    if (!resetToken.value) {
        errorMessage.value = '重置令牌无效或已过期'
        return
    }

    isLoading.value = true

    try {
        await resetPasswordAPI(resetToken.value, password.value)
        isSuccess.value = true
        successMessage.value = '密码重置成功'
    } catch (error: any) {
        errorMessage.value = error.message || '密码重置失败，请重试'
    } finally {
        isLoading.value = false
    }
}

onMounted(() => {
    // 从URL参数中获取重置令牌
    const token = route.query.token as string
    if (!token) {
        errorMessage.value = '重置链接无效或已过期'
        return
    }
    resetToken.value = token
})
</script>

<style scoped>
.font-sans {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

input:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

button:hover:not(:disabled) {
    transform: translateY(-1px);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.fa-spin {
    animation: spin 1s linear infinite;
}
</style>
